<!--按钮  按钮一次则向父组件返回相关的渲染表格的数据，父组件（主页面）则渲染表格-->
<template>
  <el-button type="primary" icon="el-icon-edit" @click="handleClick">{{ buttonText }}</el-button>
</template>

<script>
import setting from "@/setting.js";

export default {
  props: {
    buttonText: {
      type: String,
      default: '自我评分'
    },
    apilink: {
      type: String,
      default: setting.API_URL
    },
    // 可以添加一个自定义事件作为 prop 传递给 ReportButton
    onButtonClick: {
      type: Function,
      default: () => {} // 提供一个默认的空函数，以防父组件没有传递这个 prop
    }
  },
  data() {
    return {

    };
  },
  methods: {

    async  refreshAndRetry(refreshToken) {
      try {
        const refreshResponse = await fetch('http://xgsys.software-studio.cn:1080/user/refresh/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            refresh: refreshToken
          })
        });

        if (!refreshResponse.ok) {
          throw new Error(`Refresh token failed with status: ${refreshResponse.status}`);
        }

        const refreshedData = await refreshResponse.json();
        localStorage.setItem('access_token', refreshedData.access); // 更新access_token

        // 使用新的access_token再次尝试获取数据
        return await this.getDataWithAccessToken();

      } catch (error) {
        if (error.message.includes('401')) {
          // 如果刷新令牌返回401，则强制跳转登录页面
          window.location.href = '/login'; // 假设登录页面是/login
        } else {
          throw error; // 重新抛出错误以便上层捕获处理
        }
      }
    },//刷新令牌 如果刷新失败则重新登录

    async getDataWithAccessToken() {
      const accessToken = localStorage.getItem('access_token');
      const refreshToken = localStorage.getItem('refresh_token');
      const requestBody = {
        "interval": [0, 10000000],
        "start_time": "2024-01-01T10:00:00Z",
        "end_time": "7024-01-31T22:00:00Z"
      };
      try {
        // 尝试使用当前的access_token获取数据
        const response = await fetch(setting.API_URL+'reportmanager/'+this.txet2op[this.buttonText]+'/get/', {
          method: 'POST', // 如果API是要求POST请求的话
          headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json' // 指定发送的内容类型为JSON
          },
          body: JSON.stringify(requestBody) // 将请求体对象转换为JSON字符串
        });

        const data = await response.json();

        // 检查返回的数据是否包含错误信息，表明token可能无效或过期
        if(!response.ok){
          if(data.code && data.code === 'token_not_valid'){
            // 令牌无效，尝试刷新
            const isok=await this.refreshAndRetry(refreshToken);
            if(isok){
              await this.getDataWithAccessToken();
            }else{
              window.location.href = '/login';
            }
          }else{
            this.$message(
                {
                  message: '获取数据失败',
                  type: data.error,
                  duration: 2000
                }
            )
          }
        }else{
          return data;
        }
      } catch (error) {
        // 网络错误或其他非token导致的错误
        throw error;
      }
    },


    async handleClick() {
      this.onButtonClick()
    }
  }
};
</script>

<!--<style scoped>-->
<!--/* 在这里你可以为按钮添加自定义样式 */-->
<!--</style>-->